<template>
  <a-modal
    :title="title"
    :visible="visible"
    :footer="null"
    class="pub-middle-dialog"
    @cancel="visible = false"
  >
    <a-radio-group
      v-model="type"
      button-style="solid"
    >
      <a-radio-button :value="1">
        评审
      </a-radio-button>
      <a-radio-button :value="2">
        用印
      </a-radio-button>
    </a-radio-group>

    <a-tabs
      type="card"
      class="mb20"
      :active-key="activeKey"
      @change="key => this.activeKey = key"
    >
      <a-tab-pane
        key="1"
        tab="当前流程"
      >
        <img
          style="width:100%"
          :src="flowChart"
        >
        <a-table
          :columns="currentColumnApprove"
          :data-source="currentTableData"
          row-key="id"
        >
          <span
            slot="serial"
            slot-scope="text, record, index"
          >{{ index + 1 }}</span>
        </a-table>
      </a-tab-pane>
      <a-tab-pane
        key="2"
        tab="历史流程"
      >
        <b-table
          ref="historyTable"
          :columns="historyColumns"
          :request="historyTableData2"
        >
          <span
            slot="serial"
            slot-scope="text, record, index"
          >{{ index + 1 }}</span>
          <div
            slot="operation"
            slot-scope="text, record, index"
            class="pub-table-list-action"
          >
            <!--todo                         -->
            <!--                        <span @click="handleEdit(record, 3)">查看</span>-->
          </div>
        </b-table>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>
<script>
import { historyList } from '@/api/material/materialMasterPlan/materialPlan'
import {
    getCurrentProcess,
    getFlowChart,
    getFlowChart2,
    getProcessNodeList,
    getProcInstByBusiness
} from '@/api/process'
import { getOrgEmployeesListBy } from '@/api/commons'
import JosnBig from 'json-bigint'

export default {
  name:'a'+Date.now(),
    props: {
        title: {
            type: String,
            default: '历史记录选择'
        },
        row: {
            type: Object,
            default: () => null
        }
    },
    data() {
        return {
            currentColumnApprove: [
                {
                    title: '序号',
                    dataIndex: 'serial',
                    scopedSlots: { customRender: 'serial' },
                    width:70
                },
                {
                    title: '节点名称',
                    dataIndex: 'taskName'
                },
                {
                    title: '处理人',
                    dataIndex: 'userName'
                },
                {
                    title: '审批意见',
                    dataIndex: 'opinions'
                },
                {
                    title: '开始时间',
                    dataIndex: 'createTime'
                },
                {
                    title: '滞留时间',
                    dataIndex: 'durationInMillis'
                },
                {
                    title: '结束时间',
                    dataIndex: 'endTime'
                }
            ],
            currentTableData: [],
            historyColumns: [
                {
                    title: '序号',
                    dataIndex: 'serial',
                    scopedSlots: { customRender: 'serial' },
                    width:70
                },
                {
                    title: '节点名称',
                    dataIndex: 'name'
                },
                {
                    title: '发起人',
                    dataIndex: 'userName'
                },
                {
                    title: '发起时间',
                    dataIndex: 'startTime'
                },
                {
                    title: '滞留时间',
                    dataIndex: 'durationTime'
                },
                {
                    title: '结束时间',
                    dataIndex: 'endTime'
                }
            ],
            historyTableData2: async (params) => {
                params = Object.assign({}, params, { businessId: this.id })
                let res = await getProcInstByBusiness(params)
                const userIds = []
                res.data.forEach((item) => {
                    userIds.push(item.startUser)
                    item.endTime = item.endTime || '进行中'
                    item.durationTime = item.durationTime || '进行中'
                    item.description = []
                })
                if (userIds.length) {
                    let employees = await getOrgEmployeesListBy({ userIds })
                    res.data.forEach((r) => {
                        employees.data.some((e) => {
                            if (e.startUser === r.userId) {
                                r.userName = e.name
                                return true
                            }
                        })
                    })
                    console.log('数据返回对象：', res)
                    return res
                }
                return res
                // this.historyTableData = res.data
            },
            loading: false,
            flowChart: '',
            type: 1,
            activeKey: '1',
            visible: false,
            id: ''
        }
    },
    methods: {
        open() {
            this.visible = true
        },
        async getFlowChart(id) {
            let res = await getFlowChart2(id)
            if (res.code === 200) {
                if (typeof res.data === 'string') {
                    this.flowChart = 'data:image/png;base64,' + res.data
                } else {
                    this.flowChart = ''
                }
            }
        },
        async getCurrentTableData(id) {
            this.loading = true
            let res = await getCurrentProcess(id)
            let userIds = []
            res.data.forEach((item) => {
                userIds.push(item.assignee)
                item.endTime = item.endTime || '进行中'
                item.durationInMillis = item.durationInMillis || '进行中'
                if (item.formData) {
                    item.opinions = JosnBig.parse(item.formData).opinions
                } else {
                    item.opinions = ''
                }
                item.description = []
            })
            if (userIds.length) {
                let employees = await getOrgEmployeesListBy({ userIds })
                res.data.forEach((r) => {
                    employees.data.some((e) => {
                        if (e.userId === r.assignee) {
                            r.userName = e.name
                            return true
                        }
                    })
                })
            }
            // console.log('数据返回对象：', res)
            this.currentTableData = res.data
        }
    },
    watch: {
        async visible(val) {
            if (val) {
                this.id = this.row.reviewBusinessId
                this.loading = true
                await this.getFlowChart(this.id)
                await this.getCurrentTableData(this.id)
                this.loading = false
            } else {
                this.flowChart = ''
                this.activeKey = '1'
                this.type = 1
            }
        },
        async activeKey(v) {
            if (v === '1') {
                this.loading = true
                await this.getFlowChart(this.id)
                await this.getCurrentTableData(this.id)
                this.loading = false
            } else {
                if (this.$refs.historyTable) {
                    this.$refs.historyTable.getData()
                }
            }
        },
        async type(v) {
            console.log(v)
            if (v === 1) {
                this.id = this.row.reviewBusinessId
            } else {
                this.id = this.row.sealBusinessId
            }
            this.activeKey = '1'
            this.loading = true
            await this.getFlowChart(this.id)
            await this.getCurrentTableData(this.id)
            this.loading = false
        }
    }
}
</script>
